<template>
    <div>
        <van-space></van-space>
        <van-row>
            <div :class="videoImg">
                <img :src="img" alt="视频">
            </div>
        </van-row>
        <van-space></van-space>
        <van-row align="center">

            <van-col span="4" offset="4">
                <a-button status="success" @click="play">
                    <template #icon>
                        <icon-play-arrow-fill/>
                    </template>
                </a-button>
            </van-col>
            <van-col span="4">
                <a-button status="success" @click="stop">
                    <template #icon>
                        <icon-pause/>
                    </template>
                </a-button>
            </van-col>
            <van-col span="4">

                <a-button :status="currentLightDev.lightOn === '1'  ?  'warning':'success'" @click="lightSwitch">
                    <template #icon>
                        <icon-sun-fill/>
                    </template>
                </a-button>

            </van-col>
        </van-row>
        <van-space></van-space>
        <van-collapse v-model="active_item">
            <van-collapse-item title="更多" name="cam" icon="setting-o">
                <van-row>
                    <van-col span="5">
                        <span>分辨率</span>
                    </van-col>
                    <van-col>
                        <a-dropdown @select="v => changeFrameSize(v)"
                                    :popup-max-height="false">
                            <a-button size="mini">{{ meta.frame_size[currentLightDev.framesize].desc }}
                                <icon-down/>
                            </a-button>
                            <template #content>
                                                    <span v-for="(val, index) in meta[currentLightDev.sensor_name]"
                                                          :key="index">
                                                    <a-doption
                                                            :value="meta.frame_size[val].index">{{
                                                        meta.frame_size[val].desc
                                                        }}</a-doption>
                                                    </span>
                            </template>
                        </a-dropdown>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="4">
                        <span>水平镜像</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('hmirror' ,event , '10')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.hmirror" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>垂直翻转</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('vflip' ,event , '11')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.vflip" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>colorbar</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('colorbar' ,event , '6')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.colorbar" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="5">
                        <span>亮度增益</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.brightness" min="-2" max="2"
                                     @change="sliderSetting('brightness','1')"/>
                    </van-col>
                    <van-col offset="1" span="5">
                        <span>饱和度</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.saturation" min="-2" max="2"
                                     @change="sliderSetting('saturation','2')"/>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="5">
                        <span>画质压缩</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.quality" min="0" max="64"
                                     @change="sliderSetting('quality','5')"/>
                    </van-col>
                    <van-col span="5" offset="1">
                        <span>锐化</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.sharpness" min="-2" max="2"
                                     @change="sliderSetting('sharpness','3')"/>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="5">
                        <span>对比度</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.contrast" min="-2" max="2"
                                     @change="sliderSetting('contrast','0')"/>
                    </van-col>
                    <van-col span="5" offset="1">
                        <span>wb_mode</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.wb_mode" min="0" max="4"
                                     @change="sliderSetting('wb_mode','17')"/>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="3">
                        <span>降噪</span>
                    </van-col>
                    <van-col span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('denoise' ,event , '4')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.denoise" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>awb_gain</span>
                    </van-col>
                    <van-col span="3" offset="1">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('awb_gain' ,event , '13')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.awb_gain" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="5">
                        <span>exposure_ctrl</span>
                    </van-col>
                    <van-col span="3" offset="1">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('exposure_ctrl' ,event , '9')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.exposure_ctrl" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="5">
                        <span>特殊效果</span>
                    </van-col>
                </van-row>
                <van-row>
                    <van-col offset="1">
                        <a-radio-group type="button" size="small" v-model="currentLightDev.special_effect"
                                       @change="sliderSetting('special_effect','16')">
                            <a-radio value="0">无</a-radio>
                            <a-radio value="1">负片</a-radio>
                            <a-radio value="2">黑白</a-radio>
                            <a-radio value="3">红</a-radio>
                            <a-radio value="4">绿</a-radio>
                            <a-radio value="5">蓝</a-radio>
                            <a-radio value="6">黄</a-radio>
                        </a-radio-group>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="4">
                        <span>aec2</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('aec2' ,event , '12')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.aec2" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>bpc</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('bpc' ,event , '20')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.bpc" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>wpc</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('wpc' ,event , '22')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.wpc" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="5">
                        <span>ae_level</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.ae_level" min="-2" max="2"
                                     @change="sliderSetting('ae_level','18')"/>
                    </van-col>
                    <van-col span="5" offset="1">
                        <span>aec_value</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.aec_value" min="0" max="1200"
                                     @change="sliderSetting('aec_value','15')"/>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="5">
                        <span>agc_gain</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.agc_gain" min="0" max="30"
                                     @change="sliderSetting('agc_gain','14')"/>
                    </van-col>
                    <van-col span="5" offset="1">
                        <span>gainceiling</span>
                    </van-col>
                    <van-col>
                        <van-stepper v-model="currentLightDev.gainceiling" min="0" max="6"
                                     @change="sliderSetting('gainceiling','25')"/>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="4">
                        <span>lenc</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('lenc' ,event , '23')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.lenc" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>dcw</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('dcw' ,event , '19')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.dcw" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>whitebal</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('whitebal' ,event , '7')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.whitebal" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="4">
                        <span>raw_gma</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('raw_gma' ,event , '21')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.raw_gma" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                    <van-col span="4">
                        <span>gain_ctrl</span>
                    </van-col>
                    <van-col offset="1" span="3">
                        <a-switch size="small" :checked-color="checked_color"
                                  @change="event =>switchSetting_m('gain_ctrl' ,event , '8')"
                                  checked-value="1"
                                  unchecked-value="0"
                                  :model-value="currentLightDev.gain_ctrl" unchecked-color="rgb(var(--gray-4)">
                        </a-switch>
                    </van-col>
                </van-row>
                <van-space></van-space>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>
<script>

import {Message} from "@arco-design/web-vue";
import {
    IconDown,
    IconPause,
    IconPlayArrowFill,
    IconSunFill
} from "@arco-design/web-vue/es/icon";
import axios from "axios";
import {cmdChannel} from "@/js/on_start";
import meta from "@/js/camera_meta";

import {video_svg} from "@/js/res";
export default {
    name: 'camera',
    components: {
        IconPlayArrowFill, IconPause, IconSunFill, IconDown

    },
    data() {
        return {
            active_item: [],
            videoImg: 'video_m_c videoOff',
            currentLightDev: {},
            meta: meta,
            img: video_svg,
            imgFull: video_svg,
            show: false,
            checked_color: "#1abe14",
            attachVideoChannel: {
                devSn: "",
                channelIndex: 0,
                channelType: 0 // mjpeg
            }
        }
    }, created() {
        this.sn = history.state['sn'];
        if (process.env.NODE_ENV === 'development') {
            Message.info({content: `this sn is  ${this.sn}`, showIcon: true});
        }
        this.currentLightDev = window.currentLightDev;
        this.attachVideoChannel.devSn = this.sn;
        this.attachVideoChannel.channelIndex = parseInt(this.currentLightDev.channelIndex);
    }, methods: {
        updateProp(key, val, notUpdateLocal) {
            if (!notUpdateLocal) {
                this.currentLightDev[key] = val
            }
            let url = '/dm/updateProp';
            if (process.env.NODE_ENV === 'development') {
                url = window.dev.httpUrlBase + url;
            }
            axios.post(url, {
                sn: this.sn, key: key, value: val
            }).then(console.log).catch(console.log)
        },
        send(opcode, params) {
            cmdChannel.sendRawCmd(this.sn, opcode, params);
        },
        play() {
            let url = '/dm/attachVideoChannel';
            if (process.env.NODE_ENV === 'development') {
                url = window.dev.httpUrlBase + url;
            }
            let sn = this.sn;
            axios.post(url, this.attachVideoChannel).then(console.log).catch(console.log)
            this.img = window.lightServerVideoBase + sn
            this.send(1, ['0']);
            this.videoImg = 'video_m_c videoOn'
        }, stop() {
            this.send(1, ['1']);
            this.videoImg = 'video_m_c videoOff';
            this.img = video_svg;
        }, lightSwitch() {
            const key = 'lightOn';
            let lightOn = this.currentLightDev[key] === '1'
            let nextState = lightOn ? '0' : '1'
            this.currentLightDev[key] = nextState;
            let params = lightOn ? ['3'] : ['2'];
            this.send(1, params);
            this.updateProp(key, nextState)
        }, changeFrameSize(val) {
            this.send(2, ['0', '24', `${val}`]);
            this.updateProp("framesize", val)
        }, switchSetting_m(key, val, subCode) {
            this.send(2, ['0', subCode, `${val}`]);
            this.updateProp(key, "" + val)
        }, sliderSetting(key, subCode) {
            let val = this.currentLightDev[key]
            this.send(2, ['0', subCode, `${val}`]);
            this.updateProp(key, "" + val, true)
        }
    }
}
</script>
<style>
.video_m_c {
    box-shadow: 1px 1px 2px 1px rgb(var(--gray-3));
    border-radius: 10px;
    text-align: center;
    background: rgb(var(--gray-3));
    max-width: 20em;

}

.videoOn {
    display: block;
    position: relative;
}

.videoOff {
    margin-left: 3em;
    width: 100%;
}

.videoOn > img {
    display: block;
    width: var(--availWidth);
    top: 0;
    bottom: 0;
}


</style>